<template>
  <a-space class="flex" style="min-width:400px;">
    <template v-for="(key, val, i) in queryParam">
      <j-search-select-tag
        class="select-tag"
        v-model="queryParam[val]"
        :key="i"
        :placeholder="placeholder"
        :dictOptions="districtData(i+1)"
        :disabled="disabled[i]"
        @change="changeArea($event, i+1)"
      />
    </template>
  </a-space>
</template>

<script>
import { getXzqhList } from '@/api/api'
export default {
  props: {
    type: String, // linkage_select、multi_select【为空则是linkage_select】
    placeholder:{
      type: String,
      default: '请选择'
    },
    disabled:{
      type: Array,
      default() {
        return [false, false, false]
      }
    },
    value:{
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      tagType: null,
      reloading: true,
      districtData1: [],
      districtData2: [],
      districtData3: [],
      dictOptions: [],
      queryParam: {
        prov: null,
        city: null,
        district: null
      }
    }
  },
  created() {
    this.onChangeCityData('0', 'districtData1')
  },
  computed: {
    getValue() {
      return this.value ? this.value : [];
    },
    xzqhCode() {
      let codes = [], codesLabel = []
      for (const key in this.queryParam) {
        let index = (key==='prov') ? 0: (key==='city')? 1: (key==='district')? 2: null
        let arr = this['districtData'+(index+1)].filter((col, i) => col.value === this.queryParam[key])
        let text = arr.length>0 ? arr[0].text: null
        this.$set(codes, index, this.queryParam[key])
        this.$set(codesLabel, index, text)
      }
      return {codes, codesLabel}
    },
  },
  watch:{
    'getValue': {
      immediate: true,
      handler(val) {
        // this.$set(this.queryParam, 'prov', val[0])
        // this.$set(this.queryParam, 'city', val[1])
        // this.$set(this.queryParam, 'district', val[2])
        if(val.length===3) {
          this.$set(this.queryParam, 'prov', val[0])
          this.$set(this.queryParam, 'city', val[1])
          this.$set(this.queryParam, 'district', val[2])
        } else if (val.length===2) {
          this.$set(this.queryParam, 'prov', val[0])
          this.$set(this.queryParam, 'city', val[1])
          this.$set(this.queryParam, 'district', null)
        } else if (val.length===1) {
          this.$set(this.queryParam, 'prov', val[0])
          this.$set(this.queryParam, 'city', null)
          this.$set(this.queryParam, 'district', null)
        } else if (val.length===0) {
          this.$set(this.queryParam, 'prov', null)
          this.$set(this.queryParam, 'city', null)
          this.$set(this.queryParam, 'district', null)
        }
      }
    },
    // 省级
    'queryParam.prov': {
      immediate: true,
      handler(newVal, oldVal) {
        if(newVal) this.onChangeCityData(newVal, 'districtData2')
      }
    },
    // 市级
    'queryParam.city': {
      immediate: true,
      handler(newVal, oldVal) {
        if(newVal) this.onChangeCityData(newVal, 'districtData3')
      }
    }
  },
  methods: {
    // 获取指定归属地【type=linkage_select】
    onChangeCityData(key, field) {
      let params = {
        areaCode: key,
        flagRecursive: false,
        containsSelf: false  //true，获取areaCode的tree结构；false，获取areaCode的下级数组
      }
      getXzqhList(params).then(res => {
        if (res.success) {
          let data = res.result ? res.result : []
          this[field] = data.length>0 ? data.map(item=>{
            return {
              value: item.code.toString(),
              text: item.name
            }
          }): []
        }
      })
    },
    // 行政区划取值【type=linkage_select】
    changeArea(value, type){
      if(type==1) {
        this.$set(this.queryParam, 'city', null)
        this.$set(this.queryParam, 'district', null)
        this.districtData3 = []
      }
      if(type==2) {
        this.$set(this.queryParam, 'district', null)
      }
      this.reload()
      let datas = JSON.parse(JSON.stringify(this.xzqhCode))
      this.$emit('change', datas.codes)
      this.$emit('changeLabel', datas.codesLabel)
    },
    districtData(val) {
      return this['districtData' + val]
    },
    /** 重新加载组件 */
    reload() {
      this.reloading = false
      this.$nextTick(() => (this.reloading = true))
    }
  },
  model:{
    prop: 'value',
    event: 'change'
  }
}
</script>
<style lang="less" scoped>
.flex {
  display:flex;
  > * {
    flex: 1;
  }
}
</style>
